<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .d1 {
      /* 字体颜色 */
      color: red;
      color: #f00;
      color: rgb(255, 0, 0);
    }

    .d2 {
      background-color: aqua;
      /* 默认左对齐 */
      text-align: left;
      /* 右对齐 */
      text-align: right;
      /* 文字居中 */
      text-align: center;
    }
    /* 内联元素和文字一样，如需在父元素(块元素)里水平居中，需要把text-align: center写给父级元素 */
    .d3{
      background-color: yellow;
      text-align: center;
    }
    .d4{
      /* 行内块也是行，因此如需水平居中仍可以使用text-align: center属性，但还是需要加给父级 */
      text-align: center;
    }
    /* 块级元素在块级元素中水平居中(对齐方式)不能用text-align: center属性 */
    .d5{
      background-color: yellowgreen;
      text-align: center;
    }
    .d5 > div{
      width: 50px;
      height: 50px;
      background-color: red;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="d1">字体颜色</div>
  <div class="d2">文字水平对齐</div>
  <div class="d3"><span>包了一个内联元素</span></div>
  <div class="d4">
    <img src="./img/图片居中.jpeg" alt="">
  </div>
  <div class="d5">
    <div></div>
  </div>
</body>
</html>